<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <title>使用webmagic爬取CSDN博客</title>
    <style>
        .main {
            margin-top: 10px;
        }

        .center {
            text-align: center;
        }

        .author {
            margin-left: 60px;
        }

        .date {
            margin-left: 80px;
        }

        .title {
            padding-left: 10px;
            display: inline-block;
            width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #blogPage{
            height: 20px;
        }
    </style>
</head>
<body>
<div th:include="common/header::common"></div>
<div class="layui-container main">
    <table class="layui-table">
        <thead>
        <tr>
            <th>博客url</th>
            <th>博客作者</th>
            <th>发表时间</th>
            <th>博客阅读量</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="blog:${blogPage.content}">
            <td>
                <a th:text="${blog.title}" th:href="${blog.sourceUrl}" class="title" target="_blank">${blog.title}</a>
            </td>
            <td><span class="author" th:text="${blog.author}"></span></td>
            <td><span class="date" th:text="${blog.publishTime}"></span></td>
            <td> <span class="date" th:text="${blog.readNum}"></span></span></td>
        </tr>
        </tbody>
    </table>
  <div id="blogPage"></div>
</div>
<div th:include="common/footer::common"></div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    function go(pageNum, pageSzie) {
        window.location.href = "/blogs/list.htm?num=" + pageNum + "&size=" + pageSzie
    }

    layui.use('laypage', function () {
        var laypage = layui.laypage;
        var total = [[${blogPage.totalElements}]];
        var size = [[${blogPage.size}]];
        var num =[[${blogPage.number}]];
        //执行一个laypage实例
        laypage.render({
            elem: 'blogPage' //注意，这里的 test1 是 ID，不用加 # 号
            , count: total //数据总数，从服务端得到
            ,curr:num+1
            , limit: size
            , limits: [18, 24, 30, 36]
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    window.location.href = "/blogs/list.htm?num=" + obj.curr + "&size=" + obj.limit;
                }
            }

        });
    });
</script>
</body>
</html>